<template>
    <div id="login">
        <header class="header" style="display:block;">
            <span class="icon icon-goback" @click="goback()"></span>
            <span class="txt-header">京东登录</span>
        </header>
        <section class="page">
            <div class="wrap loginPage">
                <div id="sms_login" class="login-wrap login-wrap-active" style="display:none">
                    <div class="sms-input-box">
                        <div class="input-container">
                            <label for="" class="area-box J_ping">
                              <span class="area_code" code="86">+86&nbsp;&nbsp;&nbsp;</span>|
                            </label>
                            <input type="tel" id="telphone" @focus="telblock()" @blur="telnone()" class="acc-input telphone sms-txt-input J_ping" placeholder="请输入手机号">
                            <span class="icon icon-clear" style="margin-right:105px;display:none"></span>
                        </div>
                        <button class="mesg-code mesg-disable J_ping">获取验证码</button>
                    </div>
                    <div class="input-container">
                      <input type="tel" class="acc-input telCode sms-txt-input J_ping" @focus="elblock()" @blur="elnone()" placeholder="请输入收到的验证码">
                      <span class="icon icon-clear el" style="display:none"></span>
                    </div>
                </div>
                <div id="username_login" class="login-wrap login-wrap-active">
                  <div class="input-container">
                    <input type="text" id="username" @focus="pasblock()" @blur="pasnone()" class="acc-input username txt-input J_ping" placeholder="用户名/邮箱/已验证手机" style="border:0;font-size:16px;padding-right:30px;outline:0;">
                    <span class="icon icon-clear pas" style="display:none"></span>
                  </div>
                  <div class="input-container">
                    <input type="password" class="acc-input password txt-input J_ping"  placeholder="请输入密码"> 
                    <label class="label-checkbox J_ping">
                      <div class="checkbtn" @click="eyeon()"></div>
                    </label>
                    <button class="J_ping findpwd">忘记密码</button>
                  </div>
                </div>
                <div class="notice">&nbsp;</div>
                <div class="btn J_ping">登 录</div>
                <div class="btn btn-onestep J_ping">一键登录</div>
                <div class="quick-nav clearfix">
                  <div class="J_ping planBLogin">
                    <span class="txt-planBLogin message" @click="changeLogin()" >短信验证码登录</span>
                  </div>
                  <div class="J_ping planBLogin" style="margin-left:140px;">
                    <span class="txt-planBLogin">手机快速注册</span>
                  </div>
                </div>
                <div class="login-type">
                  <div class="quick-login">
                    <h4 class="txt-otherLogin">其他登录方式</h4>
                    <div class="J_ping quick-qq" style="left:30%;">
                      <i class="icon icon-mlogin icon-qq"></i>
                      <span class="txt-qq">QQ</span>
                    </div>
                    <div class="J_ping quick-qq"  style="left:35%;">
                      <i class="icon icon-mlogin icon-wexin"></i>
                      <span class="txt-qq">微信</span>
                    </div>
                  </div>
                  <div class="agreement-tips">
                    <p>登录即代表您已同意<span style="color: #409eff;">京东隐私政策</span></p>
                  </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
export default {
  methods: {
    goback(){
      this.$router.push({
        name:'index'
      })
    },
    changeLogin() {
      const smsLogin = document.querySelector("#sms_login");
      const message = document.querySelector(".message");
      const usernameLogin = document.querySelector("#username_login");
        message.innerText = "账号密码登录";
        smsLogin.style.display = "block";
        usernameLogin.style.display = "none";
    },
    eyeon() {
      const checkbtn = document.querySelector(".checkbtn");
      const password = document.querySelector(".password");
      if ((password.type = "password")) {
        checkbtn.style.background =
          "url('http://127.0.0.1:8088/upload/eyeon.png')no-repeat";
        password.type = "text";
      }
    },
    telblock() {
      const delicon = document.querySelector(".icon-clear");
      delicon.style.display = "block";
    },
    telnone() {
      const delicon = document.querySelector(".icon-clear");
      delicon.style.display = "none";
    },
    elblock() {
      const el = document.querySelector(".el");
      el.style.display = "block";
    },
    elnone() {
      const el = document.querySelector(".el");
      el.style.display = "none";
    },
    pasblock() {
      const pas = document.querySelector(".pas");
      pas.style.display = "block";
    },
    pasnone() {
      const pas = document.querySelector(".pas");
      pas.style.display = "none";
    }
  }
};
</script>

<style lang="scss" scoped>
#login {
  overflow-y: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  color: #222;
  background-color: #fff;
  .header {
    height: 44px;
    line-height: 44px;
    background: #fff;
    font-size: 17px;
    z-index: 999;
    .icon {
      width: 24px;
      height: 24px;
      overflow: hidden;
      display: block;
      position: absolute;
      background-repeat: no-repeat;
      background-size: 100% auto;
    }
    .icon-goback {
      top: 10px;
      left: 10px;
      background-image: url("http://127.0.0.1:8088/upload/left.png");
    }
    .txt-header {
      display: inline-block;
      font-size: 17px;
      margin-left: 150px;
    }
  }
  .page {
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    padding: 0 25px 25px;
    .wrap {
      max-width: 750px;
      margin: 0 auto;
      //   .login-wrap {
      //     display: none;
      //   }
      .login-wrap-active {
        display: block;
        .sms-input-box {
          position: relative;
          .input-container {
            height: 50px;
            padding-top: 10px;
            padding-bottom: 10px;
            position: relative;
            overflow: hidden;
            margin-top: 20px;
            background: #fff;
            border-bottom: 1px solid #efefef;
            box-sizing: border-box;

            .txt-input {
              line-height: normal;
              border-radius: 0;
              font-size: 16px;
              border: 0;
              margin: 0;
              border: 0;
              outline: 0;
            }
            .area-box {
              position: absolute;
              width: 72px;
              height: 50px;
              top: 0;
              left: 0;
              line-height: 50px;
              font-size: 16px;
              .area_code {
                font-family: PingFangSC-Semibold;
                display: inline-block;
                text-align: center;
                width: 50px;
              }
            }
            .acc-input {
              height: 100%;
              color: #222;
              font-family: PingFangSC-Semibold;
            }
            .telphone {
              width: 125px;
              padding-left: 70px;
              padding-right: 130px;
            }
            .icon {
              width: 24px;
              height: 24px;
              overflow: hidden;
              display: inline-block;
              position: absolute;
            }
            .icon-clear {
              width: 24px;
              height: 24px;
              right: 0;
              top: 13px;
              background: url("http://127.0.0.1:8088/upload/x.png");
              background-repeat: no-repeat;
              background-size: 100% auto;
            }
            .sms-txt-input {
              line-height: normal;
              border-radius: 0;
              border: 0;
              margin: 0;
              padding: 1px 0px;
              padding-left: 70px;
              padding-right: 130px;
              font-size: 16px;
            }
          }
          .mesg-code {
            position: absolute;
            width: 100px;
            height: 34px;
            line-height: 34px;
            right: 0;
            top: 8px;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            outline: 0;
            border-radius: 2px;
            text-align: center;
            padding-left: 1px;
            padding-right: 1px;
            border-left: 1px solid #ccc;
          }
          .mesg-disable {
            color: #848689;
          }
        }
        .input-container {
          height: 50px;
          padding-top: 10px;
          padding-bottom: 10px;
          position: relative;
          overflow: hidden;
          margin-top: 20px;
          background: #fff;
          border-bottom: 1px solid #efefef;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          .acc-input {
            height: 100%;
            color: #222;
            font-family: PingFangSC-Semibold;
          }
          .telCode {
            width: 100%;
            padding-right: 32px;
            padding-left: 0;
          }
          .sms-txt-input {
            line-height: normal;
            border-radius: 0;
            border: 0;
            font-size: 16px;
            padding: 1px 0px;
            outline: 0;
          }
        }
        .input-container {
          height: 50px;
          padding-top: 10px;
          padding-bottom: 10px;
          position: relative;
          overflow: hidden;
          margin-top: 20px;
          background: #fff;
          border-bottom: 1px solid #efefef;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          .icon {
            width: 24px;
            height: 24px;
            overflow: hidden;
            display: inline-block;
            position: absolute;
          }
          .icon-clear {
            width: 24px;
            height: 24px;
            right: 0;
            top: 13px;
            background: url("http://127.0.0.1:8088/upload/x.png");
            background-repeat: no-repeat;
            background-size: 100% auto;
          }
          .username {
            width: 100%;
            padding: 0 30px 0 0;
            border: 0;
          }
          .password {
            width: 100%;
            padding: 0 150px 0 0;
          }
          .acc-input {
            height: 100%;
            color: #222;
            font-family: PingFangSC-Semibold;
          }
          .txt-input {
            line-height: normal;
            border-radius: 0;
            border: 0;
            font-size: 16px;
            outline: 0;
          }
          .label-checkbox {
            right: 90px;
            position: absolute;
            top: 13px;
            width: 24px;
            height: 24px;
            overflow: hidden;
            z-index: 99;
            .checkbtn {
              position: relative;
              display: block;
              width: 24px;
              height: 24px;
              background-image: url("http://127.0.0.1:8088/upload/eyeoff.png");
              background-repeat: no-repeat;
              background-size: 100% auto;
              box-sizing: border-box;
            }
          }
          .findpwd {
            position: absolute;
            height: 23px;
            line-height: 23px;
            right: 0;
            top: 12.5px;
            background-color: #fff;
            color: #222;
            font-size: 14px;
            border: 0;
            outline: 0;
            border-radius: 2px;
            text-align: center;
            padding-left: 16px;
            border-left: 1px solid #ccc;
            box-shadow: none;
          }
        }
      }
      .notice {
        font-size: 14px;
        line-height: 30px;
        color: #f23030;
        min-height: 15px;
        text-align: left;
      }
      .btn {
        box-shadow: none;
        width: 100%;
        height: 50px;
        line-height: 50px;
        display: block;
        background-color: #efefef;
        border-radius: 25px;
        font-size: 16px;
        color: #fff;
        background-image: linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba);
        text-align: center;
        font-family: PingFangSC-Semibold;
      }
      .btn-onestep {
        color: #f23030 !important;
        box-sizing: border-box;
        border: 1px solid #ff2000;
        color: #f10000;
        background: #fff;
        margin-top: 10px;
      }
      .quick-nav {
        margin-top: 20px;
        text-align: center;
        .planBLogin {
          float: left;
          color: #999;
          line-height: 22px;
          font-family: PingFang-SC-Regular;
          font-size: 14px;
          text-align: center;
        }
      }
      .clearfix::before {
        content: "";
        display: table;
      }
      .clearfix:after {
        clear: both;
        content: "";
        display: table;
      }
      .login-type {
        margin-top: 88px;
        .quick-login {
          height: 80px;
          position: relative;
          padding: 24.5px 0 0;
          border-top: 1px solid #efefef;
          .txt-otherLogin {
            font-size: 12px;
            font-weight: 400;
            position: absolute;
            top: -39px;
            left: 35%;
            background-color: #fff;
            padding: 5px 15px;
            color: #ccc;
            text-align: center;
          }
          .quick-qq {
            position: relative;
            width: 30px;
            height: 30px;
            color: #616161;
            margin: 0 15px;
            font-size: 14px;
            display: inline-block;
            text-align: center;
            .icon {
              overflow: hidden;
              display: block;
              position: absolute;
            }
            .icon-mlogin {
              width: 26px;
              height: 26px;
            }
            .icon-qq {
              background-image: url("http://127.0.0.1:8088/upload/qq.png");
              background-repeat: no-repeat;
              background-size: 100% auto;
              background-position: center;
            }
            .icon-wexin {
              background-image: url("http://127.0.0.1:8088/upload/weixin.png");
              background-repeat: no-repeat;
              background-size: 100% auto;
              background-position: center;
            }
            .txt-qq {
              position: absolute;
              bottom: -18px;
              left: -12px;
              display: inline-block;
              width: 48px;
              text-align: center;
              color: #999;
              font-size: 11px;
            }
          }
        }
        .agreement-tips {
          margin-top: 12px;
          text-align: center;
          font-size: 13px;
          color: #bebebe;
        }
      }
    }
  }
}
</style>

